<!-- 
    条纹背景 主要是利用了CSS线性渐变，background-size 来进行制作
    background-size用来设置条纹的宽度
    CSS线性渐变:
    如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域， 
    过渡的起止色分别是第一个和最后一个指定值。
    从效果上看，颜色会在那 个位置突然变化，而不是一个平滑的渐变过程
     repeating-linear-gradient 重复线性渐变
     
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="div1">
        水平条纹 - linear-gradient两色渐变
    </div>
    <div class="div2">
        水平条纹 - linear-gradient两色条纹 background: linear-gradient(#38a 50%, #97a 0);
    </div>
    <div class="div3">
        水平条纹 - linear-gradient三色条纹 background: linear-gradient(#38a 33.33%, #3829 0, #3829 66.66%, #97a 0);
    </div>
    <div class="div4">
        垂直条纹 - linear-gradient三色条纹 background: linear-gradient(90deg, #38a 33.33%, #3829 0, #3829 66.66%, #97a 0); 90deg 旋转90° background-size:
        35px 100%;
    </div>
    <div class="div5">
        水平条纹 - repeating-linear-gradient 两色条纹 background: repeating-linear-gradient(90deg, #38a, #38a 15px, #3829 0, #3829 30px);
    </div>
    <div class="div6">
        斜向条纹 - repeating-linear-gradient 两色条纹 background: repeating-linear-gradient(45deg, #38a, #38a 15px, #3829 0, #3829 30px);
    </div>
    <div class="div7">
        灵活的同色系条纹 - repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent
        30px);
    </div>

</body>

</html>